<template>
	<view>
		<!-- 顶部区域 -->
		<view class="top">
			<u-checkbox v-model="selectAll" v-if="editable" class="select-all" shape="circle" active-color="#00C3C5" >全选</u-checkbox>
			<view class="">
				共{{ uploadedNum}}张照片
			</view>
			<view class="top-options">
				<u-icon name="question-circle" size="40" color="#00C3C5" style="margin-right: 20rpx;" @click="illustrateShow = true"></u-icon>
				<button class="top-options-select" @click="clickEditable">{{ editable ? '取消' : '选择'}}</button>
				<button class="top-options-select" style="margin-left: 10rpx;" @click="sortPhoto" v-if="editable">排序</button>
			</view>
		</view>
		<!-- 图片区域 -->
		<view class="wrap">
			<view class="pre-box">
				<view  class="pre-item">
					<view  class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" @click="uploadPhoto">
						<u-icon name="plus-circle-fill" size="50" color="#00C3C5"></u-icon>
						<view class="add-text">
							上传照片
						</view>
					</view>
				</view>
				<!-- 已经上传的图片 -->
				<view class="pre-item" v-for="(item, index) in imgLists" :key="item.id" @click="clickPic(item)">
					<image class="pre-item-image" :src="item.image" v-show="item.image" mode="aspectFill"></image>
					<div class="pre-item-uploading"></div>
					<view class="pic-select" v-if="editable" :class="{'pic-selected': selectedList.findIndex(s=>s==item.id) > -1}" >
						{{selectedList.findIndex(s=>s==item.id) + 1}}
					</view>
					<u-circle-progress v-show="item.progress && item.progress != ''" border-width="10" active-color="#00C3C5" :percent="item.progress" class="pre-item-progress" width="120" bg-color="transparent">
						<text style="width: 100%;text-align: center;font-size: 26rpx;font-weight: 500;color: #fff;">{{item.progress}}</text>
					</u-circle-progress>
				</view>
				<!-- <view class="pre-item" v-for="(a,i) in list" :key="i">
					<u-circle-progress active-color="#00C3C5" :percent="list[0].progress" v-if="list[0].progress && list[0].progress != ''" width="100" bg-color="transparent"  class="pre-item-progress">
						<text style="width: 100%;text-align: center;font-size: 26rpx;font-weight: 500;color: #fff;">{{list[0].progress}}</text>
					</u-circle-progress>
				</view> -->
				
			</view>
		</view>
		
		<!-- 帮助按钮 -->
		<view class="help" @click="helpShow = true">
			<img src="@/static/images/help.png" alt="" mode="widthFix">
		</view>
		<!-- 底部上传按钮 -->
		<view class="bottom" v-if="!editable">
			<view class="tips">
				<u-checkbox v-model="orderUploadFlag" class="select-all" shape="circle" active-color="#00C3C5" size="24">
					<text style="font-size: 26rpx;color: #999999;">按选择顺序上传图片</text>
				</u-checkbox>
				<u-icon name="question-circle" size="26" color="#00C3C5" style="margin-top: 2rpx;" @click="orderIllustrateShow = true"></u-icon>
			</view>
			<button class="btn btn-upload" @click="uploadPhoto">上传照片</button>
		</view>
		<!-- 底部移动按钮 -->
		<view class="bottom" v-else>
			<button class="btn btn-move" @click="movePic">移动到</button>
			<button class="btn btn-del" @click="toDel">删除</button>
		</view>
		<!-- 确认删除 -->
		<u-popup v-model="delShow" mode="center" border-radius="16">
			<view class="del-pop">
				<view class="title">
					是否确认删除图片？
				</view>
				<view class="btns">
					<button class="btn btn-cancel" @click="delShow = false">取消</button>
					<button class="btn btn-del" @click="delPic">删除</button>
				</view>
			</view>
		</u-popup>
		<!-- 照片角标说明弹窗 -->
		<u-popup v-model="orderIllustrateShow" mode="center" border-radius="16">
			<view class="illustrate">
				<view class="illustrate-title">
					说明
				</view>
				<view class="illustrate-content" style="color: #666666;line-height: 44rpx;">
					为勾选后将会逐张按顺序上传,可保证上传照片顺序,相对默认的上传方式(同时多张图片一起上传)会需要更长的时间!
				</view>
				<button class="illustrate-btn" @click="orderIllustrateShow = false">我知道了</button>
			</view>
		</u-popup>
		<!-- 照片角标说明弹窗 -->
		<u-popup v-model="illustrateShow" mode="center" border-radius="16">
			<view class="illustrate">
				<view class="illustrate-title">
					照片角标说明
				</view>
				<view class="illustrate-content">
					<view class="illustrate-subtitle">
						<u-icon name="info-circle-fill" size="30" color="#ff7a00" style="transform: rotate(180deg);margin-right: 6rpx;"></u-icon>
						图片质量差
					</view>
					<view class="illustrate-text">
						由于未使用原图或者照片本身就不清晰,导致图片质量较差,使用质量较差的照片会影响印刷出来的效果,建议更换为清晰、明亮的原图。
					</view>
				</view>
				<button class="illustrate-btn" @click="illustrateShow = false">我知道了</button>
			</view>
		</u-popup>
		<!-- 帮助弹窗 -->
		<u-popup v-model="helpShow" mode="center" border-radius="16">
			<view class="help-pop">
				<view class="help-title">
					上传须知
				</view>
				<view class="help-content">
					<view class="help-item" v-for="(item,index) in helpList" :key="index">
						<u-icon name="info-circle-fill" size="26" color="#ff7a00" style="transform: rotate(180deg);margin-right: 6rpx;"></u-icon>
						{{item}}
					</view>
				</view>
				<button class="help-btn" @click="helpShow = false">我知道了</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { BASE_URL} from '@/env.js';
	import http from '@/pages/request/index'
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	const token = uni.getStorageSync('token')
	export default {
		data() {
			return {
				list:[],
				id: 1,
				token,
				showUploadList: false, 
				imgLists:[],
				imgLists1:[],
				orderUploadFlag:false,//顺序上传
				selectedList:[], //选中的图片
				editable:false,
				orderIllustrateShow:false,
				delShow:false, // 确认删除
				illustrateShow:false, //图片角标弹窗
				helpShow:false, //帮助弹窗
				helpList:[
					'请不要使用逆光、弱光环境下拍摄的照片。',
					'请不要上传20M以上的照片。',
					'请不要上传色情、涉政等违规图片。',
					'提示是因为照片质量较差,会影响印刷质量(发暗和模糊),建议慎用。',
					'为了照片的完整性,照片的四周5mm内不要留有重要信息哦,小心被裁掉。'
				]
			}
		},
		computed:{
			selectAll:{
				get(){
					return this.selectedList.length >= this.imgLists.length
				},
				set(value){
					if(value){
						this.imgLists.forEach(item=>{
							if(item.id && item.id != '' && this.selectedList.findIndex(s=>s==item.id) == -1){
								this.selectedList.push(item.id)
							}
						})
					}else {
						this.selectedList = []
					}
				}
			},
			uploadedNum(){
				let uploaded = this.imgLists.filter(i=>{
					return i.id && i.id != ''
				})
				return uploaded.length
			},
		},
		onLoad(option){
			console.log(option);
			this.id = option.id
			this.getDetail()
		},
		onShow(){
			this.editable = false
			this.selectedList = []
			if(uni.getStorageSync("album_refresh")){
				uni.removeStorageSync("album_refresh")
				this.getDetail()
			}
			// setInterval(()=>{
			// 	this.list.forEach(a=>{
			// 			a.progress = a.progress + 10
			// 	})
			// },1000)
		},
		methods: {
			async getDetail(refresh = false){
				let res = await http('album.detail',{id:this.id})
				console.log(res);
				uni.setNavigationBarTitle({title:res.data.title})
				this.editable = false
				this.selectedList = []
				// this.list = JSON.parse(JSON.stringify(res.data.images)).map(r=>{
				// 	return {progress:0}
				// })
				
				// list.sort((a,b)=>{
				// 	return b.weigh - a.weigh
				// })
				this.imgLists = res.data.images
			},
			uploadPhoto(){
				let that = this
				uni.chooseMedia({
				  count: 20, // 微信小程序最大20
				  mediaType: ['image'],
				  sourceType: ['album', 'camera'],
				  sizeType:['original'],
				  camera: 'back',
				  success(res) {
				    console.log(res)
					that.upload(res.tempFiles)
				  }
				})
			},
			// upload2(files){
			// 	let that = this
			// 	return new Promise((resolve, reject) => {
			// 		let file = files.pop()
			// 		let item = {
			// 			image:file.tempFilePath,
			// 			progress: 0
			// 		}
			// 		this.imgLists.unshift(item)
			// 		var uploadTask = uni.uploadFile({
			// 			url: BASE_URL + '/addons/alioss/index/UploadAlbum',
			// 			filePath: file.tempFilePath,
			// 			name: 'file',
			// 			formData: {
			// 				id: that.id,
			// 			},
			// 			success: (res) => {
			// 				console.log(res)
			// 				item.id = res.data.id
			// 				item.progress = 100
			// 				console.log(item);
			// 				if(files.length > 0){
			// 					that.upload2(files.pop(),files)
			// 				}else if(this.uploadAll){
			// 					console.log('全部上传完成');
			// 					that.imgLists = []
			// 					that.getDetail()
			// 				}
			// 				resolve(res)
			// 			},
			// 			fail: (err) =>{
			// 				console.log("上传失败",err);
			// 			}
			// 		});
			// 		uploadTask.onProgressUpdate((res) => {
			// 			// console.log('上传进度' + res.progress);
			// 			if(res.progress == 100 || (item.progress < 99 && res.progress - item.progress > 20)){
			// 				item.progress = res.progress - 1
			// 			}
			// 		});
			// 	})
			// },
			
			upload4(files){
				let that = this
				return new Promise((resolve, reject) => {
					let file = files.pop()
					var uploadTask = uploadImage(file.tempFilePath,'xiangce/uploads/' + that.formatDate(new Date()) + "/",
						result => {
							console.log(result)
							http('album.photo',{catalog_id:this.id,url:result}).then(res=>{
								console.log("保存图片返回",res);
								
								file.progress = ''
								file.id = res.data.id
								file.image = res.data.image
								if(files.length > 0){
									that.upload4(files)
								}
							})
							resolve(result)
						},
						err =>{
							console.log(err);
							reject(err)
						}
					)
					uploadTask.onProgressUpdate((res) => {
						// console.log('上传进度' + res.progress);
						file.progress = res.progress
					});
				})
			},
			async upload(files){
				let that = this
				files.reverse()
				let imgListsTmp = JSON.parse(JSON.stringify(files)).map(file=>{
					return {
						// image:file.tempFilePath,
						progress: 0,
						id:'',
						...file
					}
				})
				this.imgLists.unshift(...imgListsTmp)

				if(this.orderUploadFlag){
					if(imgListsTmp.length > 0){
						await that.upload4(imgListsTmp)
					}
				}else {
					for (var i = 0; i < 3 && imgListsTmp.length > 0; i++) {
						that.upload4(imgListsTmp)
					}
				}
			},
			formatDate(now){
				let month = now.getMonth() + 1
				if(month < 10){
					month = '0' + month
				}
				let day = now.getDate()
				if(day < 10){
					day = '0' + day
				}
				return `${now.getFullYear()}${month}${day}`
			},
			// 点击编辑或取消
			clickEditable(){
				this.editable = !this.editable
				this.selectedList = []
			},
			clickPic(item){
				if(item.id && item.id != ''){
					if(this.editable){
						let index = this.selectedList.findIndex(s=>s==item.id)
						if(index > -1){
							this.selectedList.splice(index,1)
						}else {
							this.selectedList.push(item.id)
						}
					}else {
						console.log('去明细页面');
						uni.navigateTo({
							url: `/pages/album/photoDetail?id=` + item.id
						});
					}
				}
			},
			// 移动图片
			movePic(){
				if(this.selectedList.length <= 0){
					this.$u.toast('请选择照片')
					return
				}
				uni.navigateTo({
					url: `/pages/album/photoMove?ids=${this.selectedList.join(',')}&albumId=${this.id}`,
				});
			},
			toDel(){
				if(this.selectedList.length <= 0){
					this.$u.toast('请选择照片')
					return
				}
				this.delShow = true
			},
			// 删除图片
			delPic(){
				http('album.delPhoto',{ids:this.selectedList.join(',')},'删除中').then(res=>{
					console.log(res);
					this.delShow = false
					uni.showToast({
						title: '删除成功',
						duration: 2000,
						// image: require('@/static/images/icon_success.png')
					});
					this.getDetail()
				})
			},
			// 排序
			sortPhoto(){
				if(this.selectedList.length <= 0){
					this.$u.toast('请选择照片')
					return
				}
				if(this.selectedList.length < this.imgLists.length){
					uni.showToast({
							title: '请选中所有图片',
							duration: 2000,
							icon: 'none'
						})
					return
				}else{
					let data = this.selectedList.map((d,index)=>{
						return {
							id:d,
							weigh:index+1
						}
					})
					http('album.sortPhoto',{data}).then(res=>{
						console.log(res);
						this.editable = false
						uni.showToast({
							title: '排序成功',
							duration: 2000,
							// image: require('@/static/images/icon_success.png')
						});
						this.getDetail()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		height: 88rpx;
		line-height: 56rpx;
		background-color: #fff;
		position: relative;
		padding: 16rpx 24rpx;
		.select-all {
			position: absolute;
			left: 24rpx;
			top: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.top-options {
			position: absolute;
			right: 24rpx;
			top: 16rpx;
			display: flex;
			.top-options-select {
				// width: 98rpx;
				padding: 0 30rpx;
				height: 56rpx;
				background: #00C3C5;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.wrap {
		padding-top: 2rpx;
		height: calc(100vh - 88rpx - var(--status-bar-height));
		padding-bottom: calc(72rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(72rpx + env(safe-area-inset-bottom));
		overflow: scroll;
		.slot-btn {
			width: 182rpx;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			.add-text{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
		
		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
		
		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-start;
			flex-wrap: wrap;
			column-gap: 8rpx;
		}
		
		.pre-item {
			position: relative;
			flex:1;
			min-width: calc(25% - 8rpx);
			max-width: calc(25% - 6rpx);
			height: 140rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 8rpx;
			border: none;
			.pre-item-image {
				width: 100%;
				height: 140rpx;
			}
			.pre-item-uploading {
				width: 100%;
				height: 140rpx;
				background-color: #999999;
			}
			
			.pre-item-progress {
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			.pic-select {
				position: absolute;
				z-index: 1;
				width: 48rpx;
				height: 48rpx;
				top: 16rpx;
				right: 16rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				color: transparent;
			}
			.pic-selected {
				background-color: #00C3C5;
				color: #fff;
			}
		}
		.pre-item:nth-child(4n){
			margin-right: 0;
		}
		
		
	}
	
	// 帮助
	.help {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		right: 24rpx;
		bottom: 500rpx;
		border-radius: 50%;
		overflow: hidden;
		z-index: 100;
		img {
			width: 100%;
		}
	}
	
	
	// 底部按钮
	.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 50;
		width: 100vw;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tips {
			// font-size: 24rpx;
			// font-family: PingFang SC-Regular, PingFang SC;
			// font-weight: 400;
			// color: #999999;
			display: flex;
			justify-content: start;
			align-items: center;
			vertical-align: middle;
			/deep/.u-checkbox__label {
				margin-right: 6rpx;
			}
		}
		.btn {
			width: 322rpx;
			height: 68rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 68rpx;
			margin: 0;
		}
		.btn-upload, .btn-del {
			background: #00C3C5;
			color: #FFFFFF;
		}
		.btn-move {
			border: 2rpx solid #00C3C5;
			background: #FFFFFF;
			color: #00C3C5;
		}
	}

	.del-pop {
		width: 80vw;
		padding: 90rpx 76rpx 60rpx;
		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 600;
			color: #666666;
			line-height: 44rpx;
			text-align: center;
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 56rpx;
			.btn {
				width: 200rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0;
			}
			.btn-cancel {
				color: #00C3C5;
				border: 2rpx solid #00C3C5;
				background-color: #fff;
			}
			.btn-del {
				background: #00C3C5;
				color: #FFFFFF;
			}
		}
	}

	.illustrate {
		width: 80vw;
		padding: 20rpx 40rpx 46rpx;
		.illustrate-title {
			text-align: center;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
		}
		.illustrate-content {
			margin-top: 24rpx;
			.illustrate-subtitle{
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 14rpx;
			}
			.illustrate-text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}
		}
		.illustrate-btn {
			width: 414rpx;
			height: 88rpx;
			background: #00C3C5;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}
	}
	
	
	.help-pop {
		width: 80vw;
		padding: 20rpx 40rpx 46rpx;
		.help-title {
			text-align: center;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
		}
		.help-content {
			margin-top: 24rpx;
			.help-item{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				-webkit-background-clip: text;
				margin-bottom: 4rpx;
			}
		}
		.help-btn {
			width: 414rpx;
			height: 88rpx;
			background: #00C3C5;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}
	}
</style>
